<template>
  <div id="Home">
    <!-- 头部 -->
    <HeaderBar></HeaderBar>
    <!-- 侧边栏 -->
    <div class="container">
      <div class="slider">
        <div class="menuTitle">模板短信控制台</div>
        <div :class="[pathName==='overview'?'menuActive':'menu']" @click="handleOverview" >{{tabVal.overview}}</div>
        <div :class="[pathName==='userInfo'?'menuActive':'menu']" @click="handleUserInfo">{{tabVal.userInfo}}</div>
        <div :class="[pathName==='userSign'?'menuActive':'menu']" @click="handleUserSign">{{tabVal.userSign}}</div>
        <div :class="[pathName==='assetsList'?'menuActive':'menu']" @click="handleAssetsList">{{tabVal.assetsList}}</div>
        <div :class="[pathName==='businessConfig'?'menuActive':'menu']" @click="handleBusinessConfig">{{tabVal.businessConfig}}</div>
      </div>
      <!-- 主内容信息-->
      <div class="content">
        <!-- 头部 -->
        <div class="title">
          <div  v-if="titleMsg.iconFlag" class="backIcon">
            <img  src="../assets/images/编组 4.png" alt="返回图标">
          </div>
          <div :class="[titleMsg.iconFlag==true?'msgActive':'msg']">
            {{titleMsg.title}}
          </div>
        </div>
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBar from '../components/Header'
export default {
  name: 'Home',
  data() {
    return {
      pathName:'overview',
      tabVal:{
        overview:'概览',
        userInfo:'客户信息',
        userSign:'签名管理',
        assetsList:'资产管理',
        businessConfig:'业务配置'
      },
      titleMsg:{
        title:'概览',
        iconFlag:false
      }
    }
  },
  mounted(){
    // 获取当前路由名字，赋值
    let currentName=this.$route.name;
    this.pathName=currentName; 
    switch(currentName){
      case 'overview': 
        this.titleMsg.title=this.tabVal.overview;
        break;
      case 'userInfo': 
        this.titleMsg.title=this.tabVal.userInfo;
        break;
      case 'userSign': 
        this.titleMsg.title=this.tabVal.userSign;
        break;
      case 'assetsList': 
        this.titleMsg.title=this.tabVal.assetsList;
        break;
      case 'businessConfig': 
        this.titleMsg.title=this.tabVal.businessConfig;
        break;
      default: 
        this.titleMsg.title='';
        break;
    }
  },

  // 触发事件函数
  methods:{
    handleOverview(){
      // 跳转到概览页面
      this.$router.replace('overview');
      this.pathName='overview';
      // 改变title
      this.titleMsg.title=this.tabVal.overview;
    },
    handleUserInfo(){
      this.$router.replace('userInfo');
      this.pathName='userInfo';
      // 改变title
      this.titleMsg.title=this.tabVal.userInfo;
    },
    handleUserSign(){
      this.$router.replace('userSign');
      this.pathName='userSign';
      this.titleMsg.title=this.tabVal.userSign;
    },
    handleAssetsList(){
       this.$router.replace('assetsList');
       this.pathName='assetsList';
       this.titleMsg.title=this.tabVal.assetsList;
    },
    handleBusinessConfig(){
      this.$router.replace('businessConfig');
      this.pathName='businessConfig';
      this.titleMsg.title=this.tabVal.businessConfig;
    }
  },
  components:{
    HeaderBar
  }
}
</script>

<style scoped>
  /* 容器 */
  #home{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .container{
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
  }
   /*容器---->侧边栏 */
   .container>.slider{
    flex: 0 0 180px;
    background: #FFFFFF;
    cursor: Pointer;
  }
  .container>.slider>.menuTitle{
    height: 60px;
    font-family: PingFangSC-Semibold;
    font-size: 14pt;
    color: #031129;
    line-height: 60px;
    font-weight: 600;
    padding-left: 20px;
  }
  .container>.slider>.menu{
     height: 40px;
     padding-left: 20px;
     font-family: PingFangSC-Regular;
     font-size: 12pt;
     color: #4F596A;
     line-height: 40px;
     font-weight: 400;
     border-left: 3px solid #FFFFFF ;
  }
  .container>.slider>.menuActive{
     height: 40px;
     padding-left: 20px;
     font-family: PingFangSC-Regular;
     font-size: 12pt;
     line-height: 40px;
     font-weight: 400;
     background: #EAF2FF;
     color: #337DFF ;
     border-left:3px solid #337DFF ;
  }  
  /* 容器----->内容*/
  .container>.content{
    width: calc(100% - 180px);
    flex-grow: 1;
    flex-shrink: 0;
    background-color: #EFF1F4;
    height: 100%;
    overflow-y: scroll;
   }
    /* 容器--->内容--->头部*/
  .container>.content>.title{
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    position:fixed; 
    z-index: 100;
    background: #FFFFFF;
    margin-left: 1px;
    padding-left: 50px;
  }
  /* 头，返回图片 */
  .container>.content>.title>.backIcon{
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  /* 头, 默认样式*/
  .container>.content>.title>.msg{
    line-height: 60px;
    font-size: 16pt;
    color: #031129;
    font-weight: 400;
    font-family: PingFangSC-Regular; 
    letter-spacing: 0;
  }
  /* 头, 激活后的样式 */
  .container>.content>.title>.msgActive{
    width: 56px;
    line-height: 60px;
    font-family: PingFangSC-Regular;
    font-size: 14pt;
    color: #337DFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 400;
  }
  /* 容器---->内容--->路由内容 */
   .container>.content>.main{
     width: 100%;
  }
</style>